<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html style='height:100%;'>
<head>
<base href="<%=basePath%>">

<title>车辆管理</title>
<link rel="stylesheet" href="css/vivo.css">
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="js/font-awesome/css/font-awesome.css">
	<link rel="stylesheet" type="text/css" href="static/p_house/house_index.css" />
	<link rel="stylesheet" type="text/css" href="js/webuploader-0.1.5/webuploader.css" />
	<link href="js/select2/select2.min.css" type="text/css" rel="stylesheet" />
	<style type="text/css">
		.itab,.itab_content{
			margin: 20px;
		}
		.tabson{
			height:100%;
		}
		.itab ul li.active{
			background: #fff;
   			border-top: 1px solid #d3dbde;
		}
		.hiddenLi{
			display: none;
		}
	</style>
	
	<script src="js/jquery-1.11.1.js"></script>
	<script src="js/bootstrap2/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script> 
	<script type="text/javascript" src="<%=basePath %>js/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="js/webuploader-0.1.5/webuploader.js"></script>
	<script type="text/javascript" src="js/sharefunction.js"></script> 
	<script src="js/form.js"></script>
	<script src="js/select2/select2.min.js"></script>
<!-- 图片放大 -->
<script src="js/postbird-img-glass/postbird-img-glass.js"></script>
<style>
.webuploader-container {
	position: relative;
	top: 5px;
}

.right {
	text-align: right
}
</style>
</head>
<script type="text/javascript">
	var carDivCount = 0;
	$(function() {
		//初始化表单
		mySubmit("carManageForm", initCarManageData, carManageSuccess);
		//初始化车位使用情况
		var s3 = $("#carportType").select2();
		$("#panel2-1").hide();
		$("#panel2-2").hide();
		//初始化赋值
		initCarMsg();
		initCarportMsg();
		//鼠标悬浮提示
		toolTip();
		
	});

	function imgPlus(data) {
		$("#carManageForm .uploadcancel").css("display", "none");
		$.each(data, function(i, v) {
			//图片放大
			PostbirdImgGlass.init({
				domSelector : "#" + v.id + " img",
				animation : true,
				myDocument : window.parent.parent.parent
			});
		});
	}
	function getTip(data){
		var html = "<span class=\"toolTip mark-msg\"data-tip=\""+data+"\">原数据</span>"
		return html;
	}
	var defautHtml = "<span class=\"toolTip mark-msg\"data-tip=\"空\">原数据</span>";
	//车位初始化赋值
	function initCarMsg() {
		var data =${carList};
		var carMap = ${carMap};//车位对比字段
		if (data != null && data.length > 0) {
			for (var i = 0; i < data.length; i++) {
				addDiv3(data[i].brandName, data[i].carColor, data[i].carType, 1);
			}
			var $t = $("#carport_1 table");
			for (var i = 0; i < $t.length; i++) {
				v = $t[i];
				$(v).find("input[name='usePeople']").val(data[i].usePeople);
				$(v).find("input[name='carNumber']").val(data[i].carNumber);
				$(v).find("input[name='carInsurance']").val(data[i].carInsurance);
				$(v).find("input[name='drivingLicense']").val(data[i].drivingLicense);
				$(v).find("input[name='steerLicense']").val(data[i].steerLicense);
				$(v).find("input[name='id']").val(data[i].id);
				
				getFileListByFlag(data[i].id, "车辆保险", 2,"#list_clbx" + i, imgPlus);
				getFileListByFlag(data[i].id, "行驶证", 2,"#list_xsz" + i, imgPlus);
				getFileListByFlag(data[i].id, "驾驶证",2, "#list_jsz" + i, imgPlus);
				<c:if test="${requestScope.notPassExamine}"> 
					//附件
					 var calist = eval('(' + data[i].AccessoryCaList + ')');
					 if(calist.length > 0){
						var clbx = "";//车辆保险
						var xsz = "";//行驶证
						var jsz = "";//驾驶证
						for(var j=0;j<calist.length;j++){
							if(calist[j]!=null){
								if(calist[j].articleId!=null && calist[j].articleId == "车辆保险"){
									clbx += (","+calist[j].accessoryCAId);
								}else if(calist[j].articleId!=null &&calist[j].articleId == "行驶证"){
									xsz += (","+ calist[j].accessoryCAId);
								}else if(calist[j].articleId!=null &&calist[j].articleId == "驾驶证"){
									jsz += (","+ calist[j].accessoryCAId);
								}
							}
						}
						if(clbx != ""){
							getFileTempList(clbx.substring(1),"#list_clbx" + i , imgPlus);
						}
						if(xsz != ""){
							getFileTempList(xsz.substring(1), "#list_xsz" + i,  imgPlus);
						}
						if(jsz != ""){
							getFileTempList(jsz.substring(1),"#list_jsz" + i,  imgPlus);
						}
					} 
				 </c:if>
				//对比字段
				var map = carMap[data[i].id];
				if(map!=null && map !=""&&${requestScope.notPassExamine }){
					if(map.usePeople != undefined && map.usePeople != ''){
						$(v).find("input[name='usePeople']").parent().append(getTip(map.usePeople));
					}else if(map.usePeople == ''){
						$(v).find("input[name='usePeople']").parent().append(defautHtml);
					}
					if(map.carNumber != undefined && map.carNumber != ''){
						$(v).find("input[name='carNumber']").parent().append(getTip(map.carNumber));
					}else if(map.carNumber == ''){
						$(v).find("input[name='carNumber']").parent().append(defautHtml);
					}
					if(map.carInsurance != undefined && map.carInsurance != ''){
						$(v).find("input[name='carInsurance']").parent().append(getTip(map.carInsurance));
					}else if(map.carInsurance == ''){
						$(v).find("input[name='carInsurance']").parent().append(defautHtml);
					}
					if(map.drivingLicense != undefined && map.drivingLicense != ''){
						$(v).find("input[name='drivingLicense']").parent().append(getTip(map.drivingLicense));
					}else if(map.drivingLicense == ''){
						$(v).find("input[name='drivingLicense']").parent().append(defautHtml);
					}
					if(map.steerLicense != undefined && map.steerLicense != ''){
						$(v).find("input[name='steerLicense']").parent().append(getTip(map.steerLicense));
					}else if(map.steerLicense == ''){
						$(v).find("input[name='steerLicense']").parent().append(defautHtml);
					}
					if(map.carType != undefined && map.carType != ''){
						$(v).find("input[name^='carManType_']").parent().append(getTip(map.carType));
					}else if(map.carType == ''){
						$(v).find("input[name^='carManType_']").parent().append(defautHtml);
					}
					if(map.carColor != undefined && map.carColor != ''){
						$(v).find("input[name^='carColor_']").parent().append(getTip(map.carColor));
					}else if(map.carColor == ''){
						$(v).find("input[name^='carColor_']").parent().append(defautHtml);
					}
					if(map.brandName != undefined && map.brandName != ''){
						$(v).find("input[name^='brandName_']").parent().append(getTip(map.brandName));
					}else if(map.brandName == ''){
						$(v).find("input[name^='brandName_']").parent().append(defautHtml);
					}
				}
			}
			$("#carManageForm #btn_div2").show();
			$("#carManageForm #btn_div1").hide();
			$("#carManageForm").find("input").attr("readonly", true);
			$("#carManageForm").find(".addbtn,select,.Wdate").attr("disabled", true);
			$("#carManageForm").find(".icon-fullscreen").hide();
			$("#carManageForm div[id^='filePicker']").hide();
		}
	}
	//车场初始化赋值
	function initCarportMsg() {
		var data = ${carportList};
		var carportMap = ${carportMap};
		if (data != null && data.length > 0) {
			for (var i = 0; i < data.length; i++) {
				addDiv3('', '', '', 2);
			}
			var $t = $("#carport_2 table");
			for (var i = 0; i < $t.length; i++) {
				v = $t[i];
				$(v).find("input[name='carportLocation']").val(data[i].carportLocation);
				$(v).find("input[name='carportNumber']").val(data[i].carportNumber);
				$(v).find("input[name='priceMsg']").val(data[i].priceMsg);
				$(v).find("input[name='usestaDate']").val(new Date(data[i].usestaDate).format('yyyy-MM-dd'));
				$(v).find("input[name='useendDate']").val(new Date(data[i].useendDate).format('yyyy-MM-dd'));
				$(v).find("b[name='carUseType']").text(data[i].carportType);
				$(v).find("input[name='id']").val(data[i].id);
				//车场对比字段
				var map = carportMap[data[i].id];
				console.log(map.length);
				if(map!=null && map !="" ){
					if(map.carportLocation != undefined && map.carportLocation != ''){
						$(v).find("input[name='carportLocation']").parent().append(getTip(map.carportLocation));
					}else if(map.carportLocation == ''){
						$(v).find("input[name='carportLocation']").parent().append(defautHtml);
					}
					if(map.carportNumber != undefined && map.carportNumber != ''){
						$(v).find("input[name='carportNumber']").parent().append(getTip(map.carportNumber));
					}else if(map.carportNumber == ''){
						$(v).find("input[name='carportNumber']").parent().append(defautHtml);
					}
					if(map.priceMsg != undefined && map.priceMsg != ''){
						$(v).find("input[name='priceMsg']").parent().append(getTip(map.priceMsg));
					}else if(map.priceMsg == ''){
						$(v).find("input[name='priceMsg']").parent().append(defautHtml);
					}
					if(map.usestaDate != undefined && map.usestaDate != ''){
						$(v).find("input[name='usestaDate']").parent().append(getTip(new Date(data[i].usestaDate).format('yyyy-MM-dd')));
					}else if(map.usestaDate == ''){
						$(v).find("input[name='usestaDate']").parent().append(defautHtml);
					}
					if(map.useendDate != undefined && map.useendDate != ''){
						$(v).find("input[name='useendDate']").parent().append(getTip(new Date(data[i].useendDate).format('yyyy-MM-dd')));
					}else if(map.useendDate == ''){
						$(v).find("input[name='useendDate']").parent().append(defautHtml);
					}
					if(map.carUseType != undefined && map.carUseType != ''){
						$(v).find("b[name='carUseType").parent().append(getTip(data[i].carUseType));
					}else if(map.carUseType == ''){
						$(v).find("b[name='carUseType").parent().append(defautHtml);
					}
				}
			}
			$("#carManageForm #btn_div2").show();
			$("#carManageForm #btn_div1").hide();
			$("#carManageForm").find("input").attr("readonly", true);
			$("#carManageForm").find(".addbtn,select,.Wdate").attr("disabled", true);
			$("#carManageForm").find(".icon-fullscreen").hide();
			$("#carManageForm div[id^='filePicker']").hide();
		}

	}

	var optCar;
	//optCar操作字段，0：同意  1 拒绝
	function saveCar(val) {
		optCar = val;
		$("#carManageForm").submit();
	}
	var carindex;
	//封装表单数据 
	function initCarManageData() {
		carindex = layer.load(2);
		var exDataId = '${exDataId}';
		var apId = '${apId}';
		var approvalRemark = $("#carManageForm [name='approvalRemark']").val();
		if (approvalRemark == "") {
			layer.msg("审批意见不能为空");
			$("#carManageForm [name='approvalRemark']").focus();
			layer.close(carindex);
			return null;
		}
		return {
			opt : optCar,
			approvalRemark : approvalRemark,
			apId : apId,
			exDataId:exDataId
		};
	}


	//上传成功回调
	function carManageSuccess(data, status) {
		layer.close(carindex);
		if (status == "success") {
			layer.alert("保存成功！", {
				offset : '20%',
				shade : [ 0.1, '#fff' ]
			}, function() {
				parent.location.reload();
				parent.parent.getPendingCount();
				parent.parent.getPendingPassCount();
				parent.parent.getPendingBackCount();
				layer.close(carindex);
			});
		} else {
			layer.alert('保存失败！');
		}
	}
</script>
<body>
	<form class="cmxform" id="carManageForm" method="post"
		action="roomInfo/disposeCar" onsubmit="return false;">
		<div style="padding:0px">
			<div class="panel panel-default">
				<div class="panel-body">
					<!-- 车辆信息start -->
					<div id="carport_1">
						<p class="style_border_bottom">
							<span class="style_btn">车辆信息</span> <span class="style_input">&nbsp;&nbsp;
								<a class="btn btn-danger radius a_font addbtn"
								onclick="addDiv3('','','','1')" > 添加</a>
							</span>
						</p>

					</div>
					<!-- 车辆信息end -->

					<!-- 车位使用情况start -->
					<div id="carport_2">
						<p class="style_border_bottom">
							<span class="style_btn">车位使用情况</span> <strong width="100"
								style="margin:0px 10px 0px 20px">车位使用情况</strong> <select
								class="js-example-basic-single" name="carportType"
								id="carportType" style="width:160px;">
								<option value="租赁:直租">租赁:直租</option>
								<option value="租赁:转租">租赁:转租</option>
								<option value="购买">购买</option>
							</select> <span class="style_input">&nbsp;&nbsp; <a
								class="btn btn-danger radius a_font addbtn"
								onclick="addDiv3('','','','2')" > 添加</a>
							</span>
						</p>
					</div>
					<!-- 车位使用情况end -->
				</div>
			</div>
			<c:if test="${requestScope.notPassExamine }">
				<!-- 修改时添加变更说明 -->
				<div style="margin:10px;" id="approvalRemark">
					审批意见<textarea rows="3" name="approvalRemark"style="width:70%"></textarea><span style="color:red;">*</span>
				</div>
				<div style="width:100%;text-align:center; padding-top:0px">
					<button class="btn btn-danger radius my-btn"
						onclick="saveCar(0)" type="button">同意</button>
					<button class="btn btn-default radius"
						onclick="saveCar(1)" type="button">拒绝</button>
				</div>
			</c:if>
			</div>
	</form>
	<script type="text/javascript">
	
		//添加模板div
		function addDiv3(brandName, carColor, carType, i) {
			var node;
			//车辆信息
			if (i == 1) {
				//修改附件id 缩略图id 和隐藏域id
				if (carDivCount == 0) {
					$("#cm_template").find("select[name='brandName']").attr("name", "brandName_" + carDivCount);
					$("#cm_template").find("select[name='carColor']").attr("name", "carColor_" + carDivCount);
					$("#cm_template").find("select[name='carManType']").attr("name", "carManType_" + carDivCount);
					$("#cm_template #filePicker_clbx").attr('id', "filePicker_clbx" + carDivCount);
					$("#cm_template #list_clbx").attr('id', "list_clbx" + carDivCount);
					$("#cm_template #carManage_articleId").attr('id', "carManage_articleId" + carDivCount);
					$("#cm_template #filePicker_xsz").attr('id', "filePicker_xsz" + carDivCount);
					$("#cm_template #list_xsz").attr('id', "list_xsz" + carDivCount);
					$("#cm_template #filePicker_jsz").attr('id', "filePicker_jsz" + carDivCount);
					$("#cm_template #list_jsz").attr('id', "list_jsz" + carDivCount);
				} else {
					$("#cm_template").find("select[name='brandName_" + (carDivCount - 1) + "']").attr("name", "brandName_" + carDivCount);
					$("#cm_template").find("select[name='carColor_" + (carDivCount - 1) + "']").attr("name", "carColor_" + carDivCount);
					$("#cm_template").find("select[name='carManType_" + (carDivCount - 1) + "']").attr("name", "carManType_" + carDivCount);
					$("#cm_template #filePicker_clbx" + (carDivCount - 1)).attr('id', "filePicker_clbx" + carDivCount);
					$("#cm_template #list_clbx" + (carDivCount - 1)).attr('id', "list_clbx" + carDivCount);
					$("#cm_template #carManage_articleId" + (carDivCount - 1)).attr('id', "carManage_articleId" + carDivCount);
					$("#cm_template #filePicker_xsz" + (carDivCount - 1)).attr('id', "filePicker_xsz" + carDivCount);
					$("#cm_template #list_xsz" + (carDivCount - 1)).attr('id', "list_xsz" + carDivCount);
					$("#cm_template #filePicker_jsz" + (carDivCount - 1)).attr('id', "filePicker_jsz" + carDivCount);
					$("#cm_template #list_jsz" + (carDivCount - 1)).attr('id', "list_jsz" + carDivCount);
				}
				//车两管理
				node = $("#cm_template").html();
				var oTest = $("#carport_" + i);
				oTest.append(node);
	
				//初始化下拉框
				initColorSelectData(carColor, carDivCount);
				initBrandSelectData(brandName, carDivCount);
				initCarTypeSelectData(carType, carDivCount);
				carDivCount++;
			} else {
				//车位使用情况
				var carportType = $("#carportType").val();
				$("#ci_template #carUseType").text(carportType);
				node = $("#ci_template").html();
				node = node.replace(/jsu/, "usestaDate" + timeCount);
				node = node.replace(/jtr/, "useendDate" + timeCount);
				var oTest = $("#carport_" + i);
				oTest.append(node);
				oTest.find("input[name='usestaDate']").eq(timeCount).attr('id', "usestaDate" + timeCount);
				oTest.find("input[name='useendDate']").eq(timeCount).attr('id', "useendDate" + timeCount);
				timeCount++;
			}
		}
		var timeCount = 0;
		
		//初始化车辆品牌下拉框
		var brandSelectList = [];
		function initBrandSelectData(brandName, count) {
			var $s2 = $("#carport_1 select[name='brandName_" + count + "']");
			if (brandSelectList.length == 0) {
				$.getJSON("roomInfo/getCarBrandList", function(data, status) {
					if (status == "success") {
						brandSelectList = data;
						brandInitData($s2, brandName);
					}
				});
			} else {
				brandInitData($s2, brandName);
			}
		}

		function brandInitData($s2, brandName) {
			$.each(brandSelectList, function(i, v) {
				var html1 = "";
				if (v != null && v != "") {
					html1 = "<option value=\"" + v + "\">" + v + "</option>";
					$s2.append(html1);
				}
			});
			//品牌
			$s2.select2({
				tags : true
			});
			if (brandName != "" && brandName != null) {
				$s2.val(brandName).trigger("change");
			}
		}

		//初始化车型下拉框
		var carTypeSelectList = [];
		function initCarTypeSelectData(carType, count) {
			var $s2 = $("#carport_1 select[name='carManType_" + count + "']");
			if (carTypeSelectList.length == 0) {
				$.getJSON("roomInfo/getCarTypeList", function(data, status) {
					if (status == "success") {
						carTypeSelectList = data;
						carTypeInitData($s2, carType);
					}
				});
			} else {
				carTypeInitData($s2, carType);
			}
		}

		function carTypeInitData($s2, carType) {
			$.each(carTypeSelectList, function(i, v) {
				var html1 = "";
				if (v != null && v != "") {
					html1 = "<option value=\"" + v + "\">" + v + "</option>";
					$s2.append(html1);
				}
			});
			//品牌
			$s2.select2({
				tags : true
			});
			if (carType != "" && carType != null) {
				$s2.val(carType).trigger("change");
			}
		}

		//初始化车辆颜色下拉框
		var colorSelectList = [];
		function initColorSelectData(color, count) {
			var $s2 = $("#carport_1 select[name='carColor_" + count + "']");
			if (colorSelectList.length == 0) {
				$.getJSON("roomInfo/getCarColorList", function(data, status) {
					if (status == "success") {
						colorSelectList = data;
						colorInitData($s2, color);
					}
				});
			} else {
				colorInitData($s2, color);
			}
		}

		function colorInitData($s2, color) {
			$.each(colorSelectList, function(i, v) {
				var html1 = "";
				if (v != null && v != "") {
					html1 = "<option value=\"" + v + "\">" + v + "</option>";
					$s2.append(html1);
				}
			});
			//颜色
			$s2.select2({
				tags : true
			});
			if (color != "" && color != null) {
				$s2.val(color).trigger("change");
			}
		}
	</script>
</body>
<!-- 车俩信息模板div -->
<div id="cm_template" style="display:none;">
	<div style="border:1px solid gray;padding:10px;margin:10px">
		<table cellpadding="10" cellspacing="5" class="mytable">
			<tr height="45">
				<!-- 上传文件返回的附件id -->
				<input id="carManage_articleId" name="carManage_articleId"
					type="hidden" />
				<td width="90" class="right">使用人<input name="id"
					id="entityId_carId" type="hidden" /></td>
				<td width="260"><input name="usePeople" id="usePeople" value="" /></td>
				<td width="90" class="right">车型</td>
				<td width="260"><select class="js-example-basic-single"
					name="carManType" style="width:160px;">
						<option value="" selected="selected">请选择</option>
						<!--<option value="大型客车">大型客车</option>
						<option value="中型客车">中型客车</option>
						<option value="小型汽车">小型汽车</option>
						<option value="小型越野车">小型越野车</option>
						<option value="摩托车" >摩托车</option> -->
				</select></td>
				<td class="right">品牌名称</td>
				<td><select class="js-example-basic-single" name="brandName"
					style="width:160px;">
						<option value="" selected="selected">请选择</option>
				</select></td>
				<td valign="top" align="right"><a href="javascript:void(0)"
					onclick="delDiv1(this,'1')"> <i class="icon-fullscreen"></i>
				</a></td>
			</tr>
			<tr>
				<td width="90" class="right">颜色</td>
				<td><select class="js-example-basic-single" name="carColor"
					style="width:160px;">
						<option value="" selected="selected">请选择</option>
				</select></td>
				<td width="90" class="right">车牌号</td>
				<td colspan="2"><input name="carNumber" id="carNumber" /> <span></span>
				</td>

			</tr>
			<tr>
				<td width="90" class="right">车辆保险</td>
				<td width="260"><input name="carInsurance" id="carInsurance" />
					<div id='filePicker_clbx' style="display:none;">上传</div></td>
				<td width="90" class="right">行驶证</td>
				<td width="260"><input name="drivingLicense" id="drivingLicense" />
					<div id='filePicker_xsz' style="display:none;">上传</div></td>
				<td width="100" class="right">驾驶证</td>
				<td colspan="2"><input name="steerLicense" id="steerLicense" />
					<div id='filePicker_jsz' style="display:none;">上传</div></td>
			</tr>
			<tr>
				<!--车辆保险  用来显示缩略图 -->
				<td colspan="2">
					<div id='list_clbx'></div>
				</td>
				<!--行驶证  用来显示缩略图 -->
				<td colspan="2">
					<div id='list_xsz'></div>
				</td>
				<!--驾驶证 用来显示缩略图 -->
				<td colspan="3">
					<div id='list_jsz'></div>
				</td>
			</tr>
		</table>

	</div>
</div>
<!-- 车位模板div -->
<div id="ci_template" style="display:none;">
	<div style="border:1px solid gray;padding:10px;margin:10px">
		<table cellpadding="10" cellspacing="5" class="mytable">
			<tr>
				<td width="82"><b id="carUseType" name="carUseType">租赁：直租</b></td>
				<td width="50" class="right">位置<input name="id"
					id="entityId_carportId" type="hidden" /></td>
				<td width="185"><input name="carportLocation" /></td>
				<td width="70" class="right">车位号</td>
				<td><input name="carportNumber" /></td>
				<td width="70" class="right">期限</td>
				<td><input name="usestaDate" id="usestaDate" class="Wdate"
					onclick="WdatePicker({maxDate:'#F{$dp.$D(\'jtr\')}'})"
					readonly="readonly"> 至 <input name="useendDate"
					id="useendDate" class="Wdate"
					onclick="WdatePicker({minDate:'#F{$dp.$D(\'jsu\')}'})"
					readonly="readonly" /></td>
				<td width="70" class="right">价格说明</td>
				<td><input name="priceMsg" /></td>
				<td valign="top" align="right"><a href="javascript:void(0)"
					onclick="delDiv1(this,'2')"> <i class="icon-fullscreen"></i>
				</a></td>
			</tr>
		</table>
	</div>
</div>
</html>
